<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Geometry案例</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body onload="init()">
<script src="../js/three.js"></script>
<script src="../js/stats.min.js"></script>
<script src="../js/dat.gui.min.js"></script>
<script>
    //声明一些全局变量
    var renderer, camera, scene, stats, controls, gui, rotate = true;

    //声明一些几何体模型变量
    var box, circle, cone, cylinder, sphere, plane, torus;

    //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer(); //实例化渲染器
        renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
        document.body.appendChild(renderer.domElement); //添加到dom
    }

    //初始化场景
    function initScene() {
        scene = new THREE.Scene(); //实例化场景
    }

    //初始化相机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机
        camera.position.set(0, 0, 150);
    }

    //创建模型
    function initMesh() {
        var material = new THREE.MeshNormalMaterial();

        //创建立方体
        box = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), material);
        box.position.set(-50, 20, 0);
        scene.add(box);

        //创建圆
        circle = new THREE.Mesh(new THREE.CircleGeometry(5, 32), material);
        circle.position.set(-20, 20, 0);
        scene.add(circle);

        //创建圆锥
        cone = new THREE.Mesh(new THREE.ConeGeometry(5, 20, 32), material);
        cone.position.set(20, 20, 0);
        scene.add(cone);

        //创建圆柱
        cylinder = new THREE.Mesh(new THREE.CylinderGeometry(5, 5, 20, 32), material);
        cylinder.position.set(50, 20, 0);
        scene.add(cylinder);

        //创建球
        sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32), material);
        sphere.position.set(-35, -20, 0);
        scene.add(sphere);

        //创建平面
        plane = new THREE.Mesh(new THREE.PlaneGeometry(5, 5), material);
        plane.position.set(0, -20, 0);
        scene.add(plane);

        //创建圆环
        torus = new THREE.Mesh(new THREE.TorusGeometry(10, 3, 16, 100), material);
        torus.position.set(35, -20, 0);
        scene.add(torus);



    }

    //运行动画
    var step = 0; //记录旋转的角度
    function animate() {
        requestAnimationFrame(animate); //循环调用函数

        //判断是否可以旋转
        if(rotate){
            step += 0.02;

            //设置每一个模型的转向
            box.rotation.set(step, step, step);
            circle.rotation.set(step, step, step);
            cone.rotation.set(step, step, step);
            cylinder.rotation.set(step, step, step);
            sphere.rotation.set(step, step, step);
            plane.rotation.set(step, step, step);
            torus.rotation.set(step, step, step);
        }

        stats.update(); //更新性能检测框

        renderer.render(scene, camera); //渲染界面
    }

    //性能检测框
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    //创建调试框
    function initGui() {
        controls = {
            rotate:true
        };

        gui = new dat.GUI();
        gui.add(controls, "rotate").name("旋转").onChange(function (e) {
            rotate = e;
        });
    }

    //初始化函数，页面加载完成是调用
    function init() {
        initRenderer();
        initScene();
        initCamera();
        initMesh();
        initStats();
        initGui();

        animate();
    }
</script>
</body>
</html>